<template>
    <el-container direction="vertical">
        <Header :show-history="true"/>
        <el-container class="auto-width" direction="vertical">
            <el-row id="video-info" v-if="video" v-show="!inPlay">
                <el-col class="video-img">
                    <div class="pic" :style="`background-image: url('${video.pic}')`" @click="loadVod(vod.id)"></div>
                </el-col>
                <el-col class="video-sub">
                    <el-row>
                        片名: <span>{{video.name}}</span>
                    </el-row>
                    <el-row>
                        主演: <span>{{video.actor}}</span>
                    </el-row>
                    <el-row>
                        导演: <span>{{video.director}}</span>
                    </el-row>
                    <el-row>
                        地区: <span>{{video.area}}</span>
                    </el-row>
                    <el-row>
                        年份: <span>{{video.year}}</span>
                    </el-row>
                    <el-row>
                        更新: <span>{{video.last}}</span>
                    </el-row>
                    <el-col class="video-desc1">
                        简介: <span>{{fitDesc(video.desc)}}</span>
                    </el-col>
                </el-col>
                <el-col class="video-desc2">
                    {{fitDesc(video.desc)}}
                </el-col>
            </el-row>

            <div id="video-player" v-if="inPlay">
                <iframe :src="playUrl" frameborder="0" :allowfullscreen="true"></iframe>
            </div>

            <el-tabs v-if="video" v-model="video.history.src" @tab-click="handleClick">
                <el-tab-pane
                        v-for="(value, key) in video.playlist"
                        :key="key"
                        :label="key"
                        :name="key">
                    <el-button
                            size="mini"
                            v-for="(nu, index) in video.playlist[key]"
                            v-bind:key="index"
                            :type="index === video.history.index ? 'primary' : ''"
                            @click="play(index)">
                        {{nu.name}}
                    </el-button>
                </el-tab-pane>
            </el-tabs>
        </el-container>
        <Footer/>
    </el-container>
</template>

<script>
    import Header from '../components/Header';
    import Footer from "../components/Footer";
    import Loading from "../utils/loading";
    import VideoService from '../services/video.service';

    export default {
        name: 'Detail',
        components: {
            Footer,
            Header,
        },

        data() {
            return {
                playUrl: '',
                id: 1,
                video: null,
                inPlay: false,
            };
        },

        methods: {
            handleClick() {
            },
            fitDesc(desc) {
                if (desc.length > 200) {
                    return desc.substr(0, 200) + '...';
                }
                return desc;
            },
            async play(index) {
                this.inPlay = true;
                this.video.history.index = index;
                let res = await VideoService.play(this.id, this.video.history.src, this.video.history.index);
                if (res.code === 0) {
                    this.$message.error(res.msg);
                    Loading.hideLoad();
                    return;
                }
                this.playUrl = res.data.url;
            },
        },

        async mounted() {
            this.id = this.$route.query.id;
            if (this.id === undefined || this.id === null) {
                this.$message.error('ID不能为空');
                return;
            }
            Loading.showLoad('正在加载...');
            let res = await VideoService.video(this.id);
            if (res.code === 0) {
                this.$message.error(res.msg);
                Loading.hideLoad();
                return;
            }
            this.video = res.data;
            document.title = this.video.name + (this.$store.state.appName ? (' - ' + this.$store.state.appName) : '');
            Loading.hideLoad();
        },
    };
</script>

<style scoped lang="scss">
    @import "~element-ui/packages/theme-chalk/src/mixins/mixins";

    .el-button {
        & + .el-button {
            margin-left: 0px !important;
        }

        margin-right: 5px !important;
        margin-bottom: 5px !important;
    }

    #video-info > .video-img > .pic {
        width: 100%;
        padding-top: 125%;
        background-position: 50% 50%;
        background-size: cover;
        margin-bottom: 5px;
        cursor: pointer;
        background-color: #eee;
    }

    #video-info > .video-img {
        // <768px
        @include res(xs) {
            width: 32% !important;
        }
        // ≥768px
        @include res(sm) {
            width: 20% !important;
        }
        padding: 2px;
        margin-bottom: 10px;
        text-align: center;
    }

    #video-info > .video-sub {
        // <768px
        @include res(xs) {
            width: 65% !important;
        }
        // ≥768px
        @include res(sm) {
            width: 80% !important;
        }
        padding: 2px;
        margin-bottom: 10px;
        text-align: left;
        font-size: 14px;
        line-height: 22px;
    }

    /*#video-info > .video-sub > .el-row > span {*/
    /*font-size: 14px;*/
    /*}*/

    #video-info > .video-sub > .video-desc1 {
        // <768px
        @include res(xs) {
            display: none;
        }
        // ≥768px
        @include res(sm) {
            display: block;
        }
    }

    #video-info > .video-desc2 {
        // <768px
        @include res(xs) {
            display: block;
        }
        // ≥768px
        @include res(sm) {
            display: none;
        }
        font-size: 14px;
        line-height: 22px;
    }

    #video-player {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56%;
        background-color: #000;
    }

    #video-player iframe {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }

</style>
